<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2987357_u9nviiq8498.css">
    <link rel="stylesheet" href="../css/reset.css">

    <link rel="stylesheet" href="../css/details/detail.css">
</head>

<body>
    <header>
        <div class="marquee">
            <div class="marqueeCon w">

                <div class="mar_left">
                    <em class="iconfont icon-laba"></em>
                    <span>最新公告：</span>
                </div>

                <div id="scroll_div" class="fl">
                    <div id="scroll_begin">
                        注册得200元礼遇，先到先得！
                    </div>
                    <div id="scroll_end"></div>
                </div>


                <div class="mar_right">
                    <img src=""
                        alt="">
                </div>


            </div>
        </div>
        <div class="main">
            <div class="nav w">
                <h1>
                    <a href="">
                        <img src="	http://api.oiwas.com/upload/admin_upload/20210607/f7de14d1306faeac77ac89b339c47380.png"
                            alt="">
                        <span class="fans">粉丝数：36.8万</span>
                    </a>
                </h1>

                <div class="nav_right">
                    <div class="search">
                        <input type="text">
                        <em class="iconfont icon-fangdajing"></em>
                    </div>

                    <div class="nav_font">
                        <a href="">在线客服</a>
                        <a href="">查找店铺</a>
                        <a href="" class="user_regd">登录</a>
                        <a href="../html/cart.html">
                            <em class="iconfont icon-gouwudai"></em>
                        </a>
                    </div>
                </div>
            </div>
            <div class="column ">
                <ul class="w nav_list">
                    <li>
                        <span>首页</span>

                    </li>

                    <li>
                        <span>拉杆箱</span>
                        <ul class="hover_nav_list">
                            <li>商场同款</li>
                            <li>休闲通勤</li>
                            <li>可乐联名</li>
                        </ul>
                    </li>

                    <li>
                        <span>史努比</span>
                    </li>

                    <li>
                        <span>双肩包</span>
                        <ul class="hover_nav_list">
                            <li>商务背包</li>
                            <li>休闲背包</li>
                            <li>可乐联名</li>
                            <li>KiM潮牌</li>
                        </ul>
                    </li>

                    <li>
                        <span>象象包</span>

                    </li>

                    <li>
                        <span>快乐象家庭</span>
                        <ul class="hover_nav_list">
                            <li>时尚妈咪包</li>
                            <li>Q萌童包</li>
                        </ul>
                    </li>

                    <li>
                        <span>新品专区</span>
                    </li>

                    <li>
                        <span>品牌故事</span>
                    </li>

                    <li>
                        <span>爱华仕大广赛</span>
                    </li>

                    <li>
                        <span>招商加盟</span>
                        <ul class="hover_nav_list">
                            <li>分销招商</li>
                            <li>礼品合作</li>
                            <li>百货加盟</li>
                            <li>售后服务</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </header>


    <div class="page">
        <div class="w">
            <div class="container">
                <div class="current">
                    <div class="current">
                        <em class="iconfont icon-shizhongfill"></em>
                        <a href="">首页</a>
                        <span class="gang">|</span>
                        <a href="" class="title"></a>
                    </div>
                </div>
            </div>


            <div class="themes">
                <div class="article">
                    <div class="articleClearfix">
                        <div class="productScroll">
                            <div class="prev">
                                <i class="iconfont icon-xiangshang2"></i>
                            </div>

                            <ul class="scrollerWrap">

                            </ul>

                            <div class="next">
                                <i class="iconfont icon-xiangxia2"></i>
                            </div>
                        </div>

                        <div class="scrollBack">
                            <div class="left1">
                                <img src="" alt="" class="bigImg">
                                <div class="cover"></div>
                            </div>

                            <div class="right">
                                <img src="" alt="">
                            </div>
                        </div>

                        <div class="scrollMessage">
                            <strong class="s_type"></strong>
                            <h5 class="s_title"></h5>
                            <p>价格：<del>￥859</del></p>
                            <h6 class="s_sale"></h6>


                            <ul class="floatClearfix">
                                <li class="red" title="红色" sid="3">
                                    <img src="http://api.oiwas.com/upload/attr_thumbnail/20210410/bbfcd7639b8d1f0d5e0194bde1b866df.png"
                                        alt="">
                                </li>

                                <li class="white" title="白色" sid="1">
                                    <img src="http://api.oiwas.com/upload/attr_thumbnail/20210410/93a75b3d3e0975928e7b0e9b0bd52c75.png"
                                        alt="">
                                </li>

                                <li class="black" title="黑色" sid="0">
                                    <img src="http://api.oiwas.com/upload/attr_thumbnail/20210410/1b3d41d8a71297385a45f929bc921128.png"
                                        alt="">
                                </li>
                            </ul>

                            <div class="selectStyle">
                                <div class="selectNumb">
                                    <span style="display: inline-block;" class="t_size">20寸</span>

                                    <div class="inselect">
                                        <p>20寸</p>
                                        <p>24寸</p>
                                    </div>
                                </div>

                                <div class="pdNum">
                                    <div class="reduce">-</div>
                                    <input type="text" value="1">
                                    <div class="add">+</div>
                                </div>
                            </div>

                            <div class="goCart">
                                立即购买
                                <span>→</span>
                            </div>

                            <div class="oncart">
                                加入购物车
                                <span>→</span>
                            </div>

                            <div class="freight">
                                <p>
                                    <em class="iconfont icon-duigouxiao"></em>
                                    该商品免运邮
                                </p>

                                <p>
                                    <em class="iconfont icon-duihuakuang"></em>
                                    在线客服
                                </p>
                            </div>

                            <div class="fenxiang">
                                <div class="weibo">
                                    <i class="iconfont icon-weibo"></i>
                                </div>

                                <div class="weixin">
                                    <i class="iconfont icon-qq"></i>
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="parameterStyle">
                        <div class="parameterView">
                            <div class="parameterr">
                                <h3 class="product">产品参数</h3>

                                <ul>
                                    <li>品牌： OIWAS/爱华仕</li>
                                    <li>材质： 聚碳酸酯（PC</li>
                                    <li>里料材质： 织物</li>
                                    <li>尺寸： 20/24寸</li>
                                    <li>闭合方式： 拉链</li>
                                    <li>内部结构： 拉链暗袋，手机袋，证件袋</li>
                                    <li>是否有扩张层： 否</li>
                                    <li>锁的类型： TSA密码锁</li>
                                    <li>风格：时尚潮流</li>
                                    <li>上市时间： 2019年冬季</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="articleTable">
                    <div class="tableCheck">
                        <span class="s_active">商品描述</span>
                        <span >商品评价</span>
                    </div>
                </div>

                <div class="userass"  >
                    <p>
                        <img src="http://api.oiwas.com/upload/wangeditor/20210410/5fa89b1684f864741b5ae35d6e47ed2a.jpg" alt="">
                        <img src="http://api.oiwas.com/upload/wangeditor/20210410/26c919647cefc95ccc39d8b3102d7414.jpg" alt="">
                        <img src="http://api.oiwas.com/upload/wangeditor/20210410/53dc95bb44c8576d8fcc0b2f169ddc58.jpg" alt="">
                        <img src="http://api.oiwas.com/upload/wangeditor/20210410/a80b8566d73696ebf7bb75dd8df106a2.jpg" alt="">
                        <img src="http://api.oiwas.com/upload/wangeditor/20210410/62638cd8acc842daa70e3169aea765eb.jpg" alt="">
                        <img src="http://api.oiwas.com/upload/wangeditor/20210410/0cebbe8c7e71e2d058e06f9c915b096c.jpg" alt="">
                        <img src="http://api.oiwas.com/upload/wangeditor/20210410/3457b7501a7473cd96b07e0a8087ff99.jpg" alt="">
                        <img src="http://api.oiwas.com/upload/wangeditor/20210410/dba9f87f3012911ed609e318733d7727.jpg" alt="">
                        <img src="http://api.oiwas.com/upload/wangeditor/20210410/ccb6589ac480681b1b642d261f3ac243.jpg" alt="">

                    </p>
                </div>

                <div class="userass" style="display:none">
                    <div class="cartNull">
                        <img src="http://www.oiwas.com/_nuxt/img/30b7d48.png" alt="">
                        <p>对不起 ! 亲，暂无评价</p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="footer">

        <div class="addren">
            <div class="w">
                <ul>
                    <li>联系我们</li>
                    <li>热线电话：400-887-3868</li>
                    <li>总机：0752-7832299</li>
                    <li>地址：广东省惠州市惠城区演达大道花边岭南花园1-3F</li>
                </ul>
            </div>
        </div>

        <div class="fot_list">
            <div class="list_top w">
                <ul class="nav">
                    <li>
                        <dl>
                            <dt>产品目录</dt>

                            <dd>拉杆箱</a></dd>
                            <dd>史努比</a></dd>
                            <dd>双肩包</a></dd>
                            <dd>象象包</a></dd>
                            <dd>快乐象家庭</a></dd>
                            <dd>新品专区</a></dd>
                            <dd>爱华仕大广赛</a></dd>
                            <dd>招商加盟</a></dd>
                        </dl>
                    </li>


                    <li>
                        <dl>
                            <dt>招商加盟</dt>

                            <dd>分销招商</dd>
                            <dd>礼品合作</dd>
                            <dd>百货加盟</dd>
                            <dd>售后服务</dd>
                        </dl>
                    </li>


                    <li>
                        <dl>
                            <dt>关于爱华仕</dt>
                            <dd>品牌故事</dd>
                            <dd>企业介绍</dd>
                            <dd>查找门店</dd>
                            <dd>意见反馈</dd>

                        </dl>
                    </li>


                    <li>
                        <dl>
                            <dt>我的账号</dt>
                            <dd>订单列表</dd>
                            <dd>账户资料</dd>
                            <dd>我的购物车</dd>
                        </dl>
                    </li>



                    <li>
                        <dl>
                            <dt>友情链接</dt>
                            <dd>天猫爱华仕旗舰店</dd>
                            <dd>爱华仕京东自营旗舰店</dd>
                            <dd>爱华仕官方旗舰店</dd>
                            <dd>爱华仕女包京东旗舰店</dd>
                        </dl>
                    </li>
                </ul>

                <div class="contact">
                    <ul>
                        <li>
                            <img src="http://www.oiwas.com/_nuxt/img/0ab234e.jpg" alt="">
                            <p>微博自媒体</p>
                        </li>

                        <li>
                            <img src="http://www.oiwas.com/_nuxt/img/1da4f69.jpg" alt="">
                            <p>微信公众号</p>
                        </li>


                        <li>
                            <img src="http://www.oiwas.com/_nuxt/img/252623a.jpg" alt="">
                            <p>微信小程序</p>
                        </li>

                    </ul>
                </div>
            </div>

            <div class="list_btm">
                <div class="w">

                    <div class="second_five">
                        <em class="iconfont icon-zhongguo"></em>
                        <span class="zh">
                            中国
                        </span>

                        <ul>
                            <li>隐私声明</li>
                            <li>|</li>
                            <li>使用条款</li>
                            <li>|</li>
                            <li>网站地图</li>
                        </ul>

                    </div>

                    <a href="">
                        Copyright @ 2007-2017 OIWS.All rights reserved. 粤ICP备17107696号
                    </a>
                </div>
            </div>
        </div>

        <a href="javascript:;" class="pos_a" id="goback">
            <em class="iconfont icon-shangyi"></em>
        </a>
    </div>


    <script src="../js/jquery.js"></script>
    <script src="../js/tools.js"></script>
    <script src="../js/api.js"></script>
    <script>

        // 返回顶部
        retrun_top()

        // 公告栏
        ScrollImgLeft();

        // 判断用户是否登录
        const user = localStorage.getItem('login_user');

        if (user) {
            $('.user_regd').html(user);
            $('.user_regd').attr('href', './myselef.html');

        }




        const search = location.search.split('?')[1];
        console.log(search);
        const id = search.split('=')[1];
        console.log(id);


        cc()

        async function cc() {

            const res = await details({
                id
            });

            const { status, msg, data } = res;

            $('.title').html(data.title);
            $('.s_type').html(data.type);
            $('.s_title').html(data.title);
            $('img').src = data.img;
            $('.s_sale').html(`促销价:&nbsp;￥${data.price}`)
            $('.s_title').attr('data_id' , data.id)

        }




        //选项卡 

        let at_id = ''

        $('.floatClearfix li').on('click', function () {


            $(this).css('border', '1px solid red').siblings().css('border', '1px solid #f1f1f1').parents('.scrollMessage').prev().find('img').attr('src', smallImgSrc[$(this).attr('sid')])

            at_id = $(this).attr('title');

        })


        // 尺寸选项卡
        $('.selectNumb').on('click', function () {
            $(this).css('height', '100px')
        })


        $(".selectNumb").mouseleave(function () {
            $(this).css('height', '38px');
        });


        $('.inselect p').on('click', function () {
            $(this).css({ 'color': 'red', 'border': '1px solid #f00' }).siblings().css({ 'color': '#999', 'border': '1px solid #000' }).parents('.selectNumb').find('.t_size').html($(this).html())
        })



        // 商品详情评价选项卡

        $('.tableCheck span').on('click', function () {

            $(this).addClass('s_active').siblings().removeClass('s_active').parents('.themes').children('.userass').css('display', 'none').eq($(this).index()).css('display', 'block');
   
        })
    



        // 加入购物车
        $('.oncart').on('click' , async function(){
        
            if(user) {
                
                if(at_id){
                    const goods_id = id
                    let num =  $('.pdNum input').val()
                    let color = at_id;
                    let size = $('.t_size').html()

                const res = await addToCart({
                        username: user,
                        goods_id,
                        num: num,
                        color,
                        size
                    });

                    const { status, msg } = res;

                    if (status) {
                        alert(msg);
                    } else {
                        alert(msg);
                    }
                }else{
                    alert('请选择颜色')
                }
               

            } else {
                location.href = './login.html'
            }
        
        }) 







        // 放大镜
        const smallImgSrc = ["../image/1.jpg", "../image/2.jpg", "../image/3.jpg", "../image/4.jpg", "../image/5.jpg"];
        const bigImgSrc = ["../image/01.jpg", "../image/02.jpg", "../image/03.jpg", "../image/04.jpg", "../image/05.jpg"];


        $('.bigImg').attr("src", bigImgSrc[0]);
        $('.right img').attr("src", smallImgSrc[0]);

        $(smallImgSrc).each((i, v) => {


            let oImg = $("<img src=''/>")
            oImg.prop("class", "smallImg");
            oImg.attr("src", v);
            oImg.attr('bigImg', bigImgSrc[i]);

            $('.scrollerWrap').append("<li></li>");
            $('.scrollerWrap li').eq(i).append(oImg);


        })



        // 获取所有单独命名后且包含大图路径的小图
        let smallAll = $('.smallImg');
        console.log(smallAll);

        $(smallAll).each((i, v) => {

            $(v).on('click', function (e) {
                const ev = e || event;

                $('.floatClearfix li').css('border', '1px solid #f1f1f1')

                $('.bigImg').attr("src", $(v).attr("src"));
                $('.right img').attr("src", $(v).attr("src"));
            })
        })

        // 获取值

        let r = $('.cover').outerWidth() / 2;
        console.log(r);



        // let mx = $('.left1').width() - $('.left1 img').width();
        // let my = $('.left1').height() - $('.left1 img').height();


        // 最大值

        // console.log(maxX, maxY);

        // console.log(mx);
        // console.log(my);

        // 移入移出事件

        $('.left1').hover(
            function () {


                // 显示遮罩层和右边大图
                $('.cover').css('visibility', 'visible')
                $('.right').css('visibility', 'visible')


                $(document).on('mousemove', function (e) {

                    var a = ($('.left1').outerWidth() - $('.left1 img').outerWidth()) / 2


                    let maxX = $('.left1 img').innerWidth() - $('.cover').outerWidth();
                    let maxY = $('.left1 img').innerHeight() - $('.cover').outerHeight();
                    let maxZ = $('.left1 img').innerHeight() - $('.cover').outerHeight() - 125;


                    let ev = e || event;
                    let x = ev.pageX - $('.left1 img').offset().left - r;
                    let y = ev.pageY - $('.left1 img').offset().top - r;


                    if (x <= a) x = a;
                    if (y <= 0) y = 0;
                    if (x >= maxX) x = maxX + a;
                    if (y >= maxY) y = maxY;


                    $('.cover').css({ 'left': x + 'px', 'top': y })


                    let maxS = $('.right img').innerWidth() - $('.right').innerWidth();


                    let scale = maxS / maxX;

                    if (x <= a) {
                        $('.right img').css({ 'left': (0 * -scale) + 'px' })
                    } else if (x >= maxX) {
                        $('.right img').css({ 'left': (maxX * -scale) + 'px' })
                    } else {
                        $('.right img').css({ 'left': (x * -scale) + 'px' })
                    }


                    if ($('.right img').innerHeight() > 1201) {
                        $('.right img').css({ 'top': (y * -2.6) + 'px' })
                    } else {
                        $('.right img').css({ 'top': (y * -1.8) + 'px' })
                    }
                })



            }, function () {
                $('.cover').css('visibility', 'hidden')
                $('.right').css('visibility', 'hidden')
                $('.scr0llBack').mouseover(null);
            }
        )

    </script>



</body>

</html>